<template>
  <!-- 南丁格尔玫瑰图图 -->
  <div id="main" ref="pieEchart" class="pieEchart" />
</template>

<script>
// import * as echarts from 'echarts'
export default {
  name: 'PieEchart',
  data() {
    return {
      property: 'value'
    }
  },
  mounted() {
    this.drawChart()
  },
  methods: {
    drawChart() {
      //   准备好DOM 初始化 echart 实例
    //   var myChart = this.$echarts.init(document.getElementById('main'))
      // 同一个页面使用多次会出现数据覆盖的问题 只会显示一个页面 解决方法使用ref
      const myChart = this.$echarts.init(this.$refs.pieEchart)
      //   绘制图标
      myChart.setOption({
        grid: { // 控制图表的上下左右坐标
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },

        series: [
          {
            // name: 'Access From',
            type: 'pie',
            // 南丁格尔玫瑰图 设置
            roseType: 'radius', // 南丁格尔玫瑰图的每个区域都是不同的，都是随着数据的变化而变化
            // 点击效果
            // selectedMode: 'single', //  南丁格尔玫瑰图的点击效果能将点击的部分 偏离原点一小部分
            selectedMode: 'multiple', // 选中多个 部分 都会偏离原点一小部分
            selectedOffset: 30, // 选中偏离的距离
            // 圆环设置
            // radius: ['50%', '75%'], // 圆环设置第0个元素代表的是内圆的半径第1个元素 代表的是外援的半径
            // radius: '20%', // 饼图半径设置  百分比参照的是宽度和高度中较小的那一部分的一般来进行百分比设置
            data: [
              { value: 1048, name: '淘宝' },
              { value: 735, name: '京东' },
              { value: 580, name: '唯品会' },
              { value: 484, name: '1号店' },
              { value: 300, name: '聚美优品' }
            ],
            // 饼图的文字显示
            label: {
              show: true,
              formatter: function(arg) { // 决定文字显示的内容
                // console.log(arg)
                return arg.name + '平台' + arg.value + '元\n' + arg.percent + '%'
              }
            }

          }
        ]
      })
    }
  }
}
</script>

